<!--  -->
<template>
  <div class="files-data-table">
    <el-table v-loading="loading" :data="filedata" row-key="path" lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" ref="filesTable">
      <el-table-column prop="name" label="文件名称">
        <template slot-scope="scope">
          <span v-if="scope.row.type.directory"><i class="icon-file icon-file-folder"></i>{{scope.row.name}}</span>
          <a v-else :href="scope.row.href" target="_blank" class="name_link"><i class="icon-file" :class="'icon-file-' + scope.row.type.suffix"></i>{{scope.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="文件大小" width="150" align="center">
        <template slot-scope="scope">
          {{scope.row.size | showSize}}
        </template>
      </el-table-column>
      <el-table-column prop="modified" label="创建时间" width="200" align="center">
        <template slot-scope="scope">
          {{scope.row.modified | dateformat('YYYY-MM-DD HH:mm')}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type.directory" @click="createFolder(scope.row.path)" type="text" size="small">创建</el-button>
          <el-button v-if="scope.row.type.directory" @click="updateFile(scope.row.path)" type="text" size="small">上传</el-button>
          <!-- <el-button v-if="allowEdit(scope.row.type.suffix)" @click="editFile(scope.row.name, scope.row.path, scope.row.type.suffix)" type="text" size="small">编辑</el-button> -->
          <el-button v-if="scope.row.type.directory" @click="deletefolder(scope.row)" type="text" size="small">删除</el-button>
          <el-button v-if="!scope.row.type.directory" @click="deleteFile(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <SaveFolderSimple ref="createFolder" :resetPageData = "resetData" :maps="maps" :load="load"/>
    <VirtualFolderFileUpload ref="virtualFolderFileUpload" :finish="resetData" :maps="maps" :load="load"/>
    <CodeFileVirtualDialog ref="codeFileDialog" />
  </div>
</template>

<script>
import SaveFolderSimple from '@/components/main/user/virtualroot/SaveFolderSimple.vue'
import VirtualFolderFileUpload from '@/components/common/upload/VirtualFolderFileUpload.vue'
import CodeFileVirtualDialog from '@/components/main/user/codemanagement/common/CodeFileVirtualDialog.vue'
import { mapGetters } from 'vuex'
export default {
  props: {
    // 改变加载数据的loading属性
    changeDataLoading: {
      type: Function
    },
    // 回写数据总数
    totalPage: {
      type: Function
    },
    loading: {
      type: Boolean
    },
    // 允许上传的文件限制信息
    uploadInfos: {
      type: Array
    },
    // 允许修改文件的后缀
    allowSuffix: {
      type: Array
    }
  },
  created () {
    this.initData()
  },
  data () {
    return {
      // 表格显示数据
      filedata: [],
      maps: new Map()
    }
  },
  computed: {
    ...mapGetters(['currentRoles'])
  },
  watch: {
  },
  methods: {
    initData () {
      this.filedata = []
      this.$post('/virtual-folder/ls', null).then(response => {
        if (response) {
          this.filedata = initFiledata(response)
        } else {
          this.filedata = []
        }
        this.changeDataLoading(false)
      })
    },
    load (row, treeNode, resolve) {
      this.maps.set(row.path, {row, treeNode, resolve})
      this.$post('/virtual-folder/ls', {directory: row.path}).then(response => {
        if (response) {
          let files = initFiledata(response)
          resolve(files)
        } else {
          resolve([])
        }
      })
    },
    resetData () {
      this.changeDataLoading(true)
      this.initData()
    },
    deleteFile (rowData) {
      this.$confirm('确认要删除 ' + rowData.name + ' ？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$post('/virtual-folder/del-file', {
            filepath: rowData.path
          }).then((response) => {
            if (response && response.error) {

            } else {
              if (rowData.path !== rowData.name) {
                let idx = rowData.path.lastIndexOf('/' + rowData.name)
                if (idx > -1) {
                  let parentPath = rowData.path.substring(0, idx)
                  if (this.maps.get(parentPath)) {
                    const {row, treeNode, resolve} = this.maps.get(parentPath)
                    this.load(row, treeNode, resolve)
                  }
                }
              } else {
                this.resetData()
              }
            }
          })
        })
        .catch(() => {
        })
    },
    deletefolder (rowData) {
      this.$confirm('目录下的所有文件、目录内容将一并被删除，确认要删除 ' + rowData.name + ' 文件夹？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$post('/virtual-folder/clean', {
            directory: rowData.path
          }).then((response) => {
            if (response && response.error) {

            } else {
              if (rowData.path !== rowData.name) {
                let idx = rowData.path.lastIndexOf('/' + rowData.name)
                if (idx > -1) {
                  let parentPath = rowData.path.substring(0, idx)
                  if (this.maps.get(parentPath)) {
                    const {row, treeNode, resolve} = this.maps.get(parentPath)
                    this.$set(
                      this.$refs.filesTable.store.states.lazyTreeNodeMap, parentPath, []
                    )
                    this.load(row, treeNode, resolve)
                  }
                }
              } else {
                this.resetData()
              }
            }
          })
        })
        .catch(() => {
        })
    },
    createFolder (path) {
      this.$refs['createFolder'].create('创建文件夹', path)
    },
    updateFile (path) {
      this.$refs['virtualFolderFileUpload'].click(this.uploadInfos, path)
    },
    allowEdit (suffix) {
      if (this.allowSuffix.indexOf(suffix) !== -1) {
        return true
      } else {
        return false
      }
    },
    editFile (name, path, suffix) {
      this.$refs['codeFileDialog'].show('编辑' + name, path, suffix)
    }
  },
  components: {
    SaveFolderSimple,
    VirtualFolderFileUpload,
    CodeFileVirtualDialog
  },
  filters: {
    showSize: function (value) {
      if (value < 1024) {
        return value + 'b'
      } else if (value < 1024 * 1024) {
        return parseFloat(value / 1024).toFixed(1) + 'Kb'
      } else {
        return parseFloat(value / (1024 * 1024)).toFixed(1) + 'Mb'
      }
    }
  }
}
function initFiledata (resData) {
  let newData = resData.map(item => {
    if (item.type.directory) {
      item.hasChildren = true
    }
    return item
  })
  return newData
}
</script>

<style scoped lang="scss">
.files-data-table /deep/ .el-table th {
  color: #555;
}
.files-data-table a{
  font-size: 12px;
  color: #258FFB;
  margin: 0 10px;
  &:hover{
    color: #419EFC;
  }
}
.files-data-table .name_link{
  font-size: 14px;
  color: #606266;
  margin: 0;
}
.icon-file{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  background: url(~@/assets/images/icon-file.png) no-repeat 0 0;
  &.icon-file-folder{
    background-position: 0 -20px;
  }
  &.icon-file-txt{
    background-position: 0 -40px;
  }
  &.icon-file-html,&.icon-file-htm,&.icon-file-xml,&.icon-file-css,&.icon-file-js{
    background-position: 0 -60px;
  }
  &.icon-file-xbm,&.icon-file-tif,&.icon-file-pjp,&.icon-file-svgz,&.icon-file-jpg,&.icon-file-jpeg,&.icon-file-ico,&.icon-file-tiff,&.icon-file-gif,&.icon-file-svg,&.icon-file-jfif,&.icon-file-webp,&.icon-file-png,&.icon-file-bmp,&.icon-file-pjpeg,&.icon-file-avif{
    background-position: 0 -80px;
  }
  &.icon-file-eot,&.icon-file-otf,&.icon-file-fon,&.icon-file-font,&.icon-file-ttf,&.icon-file-ttc,&.icon-file-woff,&.icon-file-woff2{
    background-position: 0 -100px;
  }
}
</style>
